<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Checkout</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
<link
	href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap"
	rel="stylesheet">
<link
	href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap"
	rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/chosen.min.css">
<link rel="stylesheet" href="css/pe-icon-7-stroke.css">
<link rel="stylesheet" href="css/magnific-popup.min.css">
<link rel="stylesheet" href="css/lightbox.min.css">
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" href="css/jquery.scrollbar.min.css">
<link rel="stylesheet" href="css/mobile-menu.css">
<link rel="stylesheet" href="fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.plugin-countdown.min.js"></script>
<script src="js/jquery-countdown.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/mobile-menu.js"></script>
<script src="js/chosen.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/jquery.elevateZoom.min.js"></script>
<script src="js/jquery.actual.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/owl.thumbs.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
<script src="js/frontend-plugin.js"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/distpicker.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="inblog-page">



<div class="main-content main-content-checkout">
    <div class="container">
       
       
	  
        <div class="checkout-wrapp">
            <div class="shipping-address-form-wrapp">
                <div class="shipping-address-form  checkout-form">
                    <div class="row-col-1 row-col">
                        <div class="shipping-address">
                            <h3 class="title-form">
                               	 送货地址
                            </h3>
							<p class="form-row forn-row-first">
								<label class="text">收货人</label> 
								<input title="first" type="text" id="consignee" class="input-text">
							</p>
							<p class="form-row forn-row-first">
								<label class="text">电话</label>
								<input title="last" type="text"id="phone" class="input-text">
							</p>

							<div id="distpicker">
							  	<select data-province="---- 选择省 ----" id="provice"></select>
							 	<select data-city="---- 选择市 ----" id="city"></select>
							 	<select data-district="---- 选择区 ----" id="county"></select>
     				 		</div>
								

						<p class="form-row forn-row-first">
                            <label class="text">详细住址</label>
                           <input title="last" id="address" type="text" class="input-text">
                        </p>
                         <p class="form-row forn-row-col forn-row-col-3">
                           	   设为默认 <input id="defaule" title="address" type="checkbox" class="input-checkbox">
                         </p>
                         <p class="form-row forn-row-first">
                         	<br>	<br>
                           <a onclick="insert()" class="button btn-credit-card" >提交</a>
						</p>
                         
                        </div>
                    </div>
                   
                </div>
            </div>
            
            
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
	$("#distpicker").distpicker();
</script>
<script src="layui/layui.js"></script>
<script type="text/javascript">
var layer;
layui.use('layer', function(){
  layer = layui.layer;
});
function insert(){
	var consignee=$("#consignee").val();
	var phone=$("#phone").val();
	var provice=$("#provice").val();
	var city=$("#city").val();
	var county=$("#county").val();
	var defaule=$("#defaule").is(':checked');
	var address=$("#address").val();
	$.post("http://localhost:8080/Greenleaf/Address/add",
		{
		"consignee" : consignee,
		"phone" : phone,
		"provice" : provice,
		"city" : city,
		"county" : county,
		"address" : address,
		"defaule" : defaule
		},
		function(res) {
			  if (res) {
				  layer.msg("添加地址成功！");
				  parent.location.reload();
			} else {
				layer.msg("添加失败，请稍后重试！");
			}
			 
		}, "json"); 
}

</script>
</html>